<template>
  <el-container style="padding: 20px">
    <el-main>
      <!-- 搜索区域 -->
      <el-row>
        <el-col :span="24">
          <el-form
            :inline="true"
            class="search-form"
            @submit.prevent="searchUsers"
          >
            <el-form-item label="姓名">
              <el-input
                v-model="filters.name"
                placeholder="输入姓名"
                clearable
              />
            </el-form-item>
            <el-form-item label="角色">
              <el-input
                v-model="filters.role"
                placeholder="输入角色"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchUsers">
                <el-icon><Search /></el-icon> 搜索
              </el-button>
              <el-button @click="resetFilters">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!-- 用户操作按钮 -->
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-button type="primary" @click="openAddDialog">
            <el-icon><CirclePlus /></el-icon> 添加用户
          </el-button>
        </el-col>
      </el-row>

      <!-- 用户列表表格 -->
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-table :data="pagedUsers" style="width: 100%" border>
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="role" label="角色" width="120" />
            <el-table-column prop="phone" label="电话" width="140" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="openEditDialog(scope.row)"
                  style="margin-right: 8px"
                >
                  编辑
                </el-button>
                <el-popconfirm
                  title="确定删除该用户吗？"
                  @confirm="deleteUser(scope.row.id)"
                >
                  <template #reference>
                    <el-button size="small" type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <el-row style="margin-top: 20px; text-align: center">
        <el-col :span="24">
          <el-pagination
            :page-size="pageSize"
            :total="totalUsers"
            :current-page="currentPage"
            layout="prev, pager, next"
            @current-change="handlePageChange"
          />
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Search, CirclePlus } from '@element-plus/icons-vue'

// 搜索条件
const filters = reactive({
  name: '',
  role: '',
})

// 分页参数
const currentPage = ref(1)
const pageSize = 5
const totalUsers = ref(0)
const allUsers = ref([])

const pagedUsers = computed(() => allUsers.value)

// 获取用户分页数据
async function fetchUserPage() {
  try {
    const res = await axios.get('http://127.0.0.1:8181/users/page', {
      params: {
        name: filters.name,
        role: filters.role,
        page: currentPage.value,
        size: pageSize,
      },
    })
    const result = res.data
    if (result.code === 0) {
      allUsers.value = result.data.data
      totalUsers.value = result.data.total
    } else {
      ElMessage.error(result.message || '获取用户列表失败')
    }
  } catch (error) {
    ElMessage.error('请求失败：' + error.message)
  }
}

// 搜索
function searchUsers() {
  currentPage.value = 1
  fetchUserPage()
}

// 重置
function resetFilters() {
  filters.name = ''
  filters.role = ''
  currentPage.value = 1
  fetchUserPage()
}

// 分页变动
function handlePageChange(page) {
  currentPage.value = page
  fetchUserPage()
}

// 初始化
onMounted(() => {
  fetchUserPage()
})

// 以下添加、编辑、删除用户操作未连接后端，如需我补充请告知
function openAddDialog() {
  ElMessage.info('添加用户功能尚未对接')
}
function openEditDialog(user) {
  ElMessage.info('编辑用户功能尚未对接')
}
function deleteUser(id) {
  ElMessage.info('删除用户功能尚未对接')
}
</script>

<style scoped>
.search-form {
  margin-bottom: 10px;
}
</style>
